<template>
  <div>
    <h2>作用域插槽</h2>
    <!-- 作用：子组件可以通过插槽传值
        默认插槽的传值
            传：
                子组件通过slot标签来传  <slot 参数名=值 />
            收
               父组件通过 template v-slot="{参数名}"
    
     -->
    <Son>
      <!-- <template v-slot="{ xxx, num, age }"> -->
      <!-- const obj={xxx:张三,num:1,age:28} -->
      <template v-slot="obj">
        <span class="name"
          >我要渲染用户名（默认插槽）:{{ obj.xxx }}---{{ obj.num }}---{{
            obj.age
          }}</span
        >
      </template>
      <!-- 使用具名插槽 -->
      <!-- <template v-slot:other v-slot="{ score }"> -->
      <template #other="{ score }">
        <div>用于渲染这个人的分数(具名插槽)：{{ score }}</div>
      </template>
    </Son>
  </div>
</template>
<script>
import Son from './components/son.vue'
export default {
  components: {
    Son
  }
}
</script>
<style lang="scss" scoped>
.name {
  color: red;
}
</style>
